<template>
    <view class="container">
        <view class="list" :style='[listStyle]'>
            <view class="item c-flex_column c-align_center c-justify_center">
                <view class="card c-flex_1">
                    <card ref='card' :word='currentQuestion' @playWord='playWord'>
                    </card>
                </view>
            </view>
        </view>
        <view class="bottom" id='bottom'>
            <view class="bottom fixed-bottom c-position_fixed c-flex_row">
                <view class="record c-flex_1">
                    <record-button ref="record" type='word' :total='questionTotal'
                        :content='currentQuestion.englishWord' :index='currentIndex' :articleId='articleId'
                        :questionId='currentQuestion.id' @next='next'></record-button>
                </view>
            </view>
        </view>
        <question-result-pop ref='resultPop' @resultChange='answerResultChange' @start='start'></question-result-pop>
    </view>
</template>

<script>
    import UnitDetailMixin from "../../mixins/unit-detail-mixin.js";
    import ContentMixin from "../../mixins/content-mixin.js";
    import Card from "./components/card.vue";
    import RecordButton from "../../components/record-button.vue";
    import QuestionResultPop from "../../components/question-result-pop.vue";
    import {
        isNotEmpty
    } from "../../../../common/utils/util.js";
    export default {
        components: {
            QuestionResultPop,
            Card,
            RecordButton
        },
        mixins: [UnitDetailMixin, ContentMixin],
        data() {
            return {
                answerResult: null, // 结果列表

                currentIndex: -1, // 当前问题index

                playAudioContext: null, // 语音播放context

                listHeight: 0, // 列表高度
            }
        },
        watch: {
            unit: function(n) {
                if (n) {
                    this.$refs.resultPop.showPop(true, 'word', this.unit.id);
                }
            },
            answerResult: function(n) {
                // 根据结果列表 初始化 currentIndex
                if (n) {
                    this.currentIndex = n.list.length;
                } else {
                    this.currentIndex = 0;
                }
            }
        },
        computed: {
            // 当前问题
            currentQuestion: function(n) {
                return this.unit && this.unit.pointWordList && this.currentIndex != -1 ? this.unit.pointWordList[
                    this.currentIndex] : {}
            },
            // 列表样式
            listStyle: function() {
                return {
                    height: `${this.listHeight}px`
                }
            },
            // 问题总数
            questionTotal: function() {
                return this.unit && this.unit.pointWordList ? this.unit.pointWordList.length : 0
            },
            // 文章id
            articleId: function() {
                return this.unit ? this.unit.id : ""
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.getListHeight();
            })
        },
        methods: {
            // 获取高度
            getListHeight() {
                const query = uni.createSelectorQuery().in(this);
                query.select("#bottom").boundingClientRect();
                query.exec(res => {
                    let result = uni.getSystemInfoSync().windowHeight;
                    res.forEach(item => {
                        result = result - item.height
                    })
                    this.listHeight = result;
                })
            },
            // 播放单词音频
            playWord(filePath) {
                if (!this.playAudioContext) {
                    this.playAudioContext = uni.createInnerAudioContext();
                    this.playAudioContext.autoPlay = true;
                }
                this.playAudioContext.src = filePath;
                this.playAudioContext.play();
            },
            // result pop 获取 answerResult 回调
            answerResultChange(e) {
                this.answerResult = e.result;
            },
            // result pop 开始答题
            start() {
                this.$refs.card.tapPlay();
            },
            // 答题完成，下一个
            next(e) {
                this.currentIndex++;
                // 全部完成
                if (e.finish) {
                    this.$refs.resultPop.showPop(true, 'word', this.unit.id);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../styles/sub-page.scss";

    .container {
        margin: 0 30rpx;
    }

    .list {
        width: 100%;
        height: 90%;

        .item {
            width: 100%;
            height: 100%;

            .card {
                padding: 30rpx;
                width: calc(100% - 60rpx);
                height: calc(100% - 60rpx);
            }
        }
    }
</style>